<template>
  <div>
    <div class="search-bar">
      <van-row>
        <van-col :span="3">
          <img :src="locationIcon" class="location-icon" alt="定位" width="70%">
        </van-col>
        <van-col :span="16">
          <input type="text" class="search-input">
        </van-col>
        <van-col :span="5">
          <van-button size="mini">查找</van-button>
        </van-col>
      </van-row>
    </div>
    <!-- swiper area -->
    <div class="swiper-area">
      <van-swipe :autoplay="1000">
        <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
          <img v-lazy="banner.image" width="100%">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- type-bar -->
    <div class="type-bar">
      <div v-for="(item,index) in category" :key="index">
        <img v-lazy="item.image" width="90%">
        <span>{{item.mallCategoryName}}</span>
      </div>
    </div>
    <!-- 广告内容 -->
    <div>
      <img v-lazy="adBanner.PICTURE_ADDRESS" width="100%">
    </div>
    <!-- 商品推荐 -->
    <div class="recommend-area">
      <div class="recommend-title">商品推荐</div>
      <div class="recommend-body">
        <!-- swiper -->
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item,index) in recommendGoods" :key="index+'t'">
            <div class="recommend-item">
              <router-link to="/register">
                <img v-lazy="item.image" width="100%">
                <div>{{item.goodsName}}</div>
                <div>￥{{item.price|moneyFilter}}({{item.mallPrice|moneyFilter}})</div>
              </router-link>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- 楼层导航 -->
    <div class="recommend-area" v-if="floordata != null">
      <div  v-for="(item,index) in floordata" :key="index+'floor'">
<<<<<<< HEAD
        <div class="recommend-title" v-text="item.floorName"></div>
        <c_floor :floorData="item.data"></c_floor>
      </div>
    </div>
    <!-- 热卖商品 -->
    <div class="hot-area">
      <div class="hot-title">热卖商品</div>
      <div class="hot-goods">
        <van-list>
          <van-row gutter="20">
            <van-col 
              span="12"
              v-for="(item, index) in hotGoods"
              :key="index+'goods'">
                <good-info
                  :goodsImage="item.image"
                  :goodsName="item.name"
                  :goodsPrice="item.price" 
                ></good-info>
            </van-col>
          </van-row>
        </van-list>
=======
        <c_floor :floorData="item.data" :floorTitle="item.floorName"></c_floor>
>>>>>>> 09660b5003c70e0aeb126f4881d898035a118fb5
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import c_floor from './floor'
import goodInfo from '../components/goodsInfo'
import {toMoney} from '@/filter/moneyFilter.js'
export default {
  data() {
    return {
      locationIcon: require("@/assets/images/location.png"),
      bannerPicArray: null,
      category: null,
      adBanner: {},
      recommendGoods: null,
      swiperOption: {
        slidesPerView: 3
      },
      floordata: null,
      hotGoods: [] // 热卖商品
    };
  },
  created() {
    this.apiData();
  },
  components: {
    swiper,
    swiperSlide,
    c_floor,
    goodInfo
  },
  methods: {
    apiData() {
      this.$api.INDEX.GETLIST()
        .then(res => {
          this.category = res.data.category;
          this.adBanner = res.data.advertesPicture;
          this.bannerPicArray = res.data.slides;
          this.recommendGoods = res.data.recommend;
          this.floordata = res.data.floordata;
          this.hotGoods = res.data.hotGoods;
        })
        .catch(() => {});
    }
  },
  filters:{
    moneyFilter(money){
      return toMoney(money)
    }
  }
};
</script>

<style lang="scss" scoped>
// 查询
.search-bar {
  height: 2.2rem;
  background-color: #e5017d;
  line-height: 2.2rem;
  overflow: hidden;
  .search-input {
    width: 100%;
    height: 1.3rem;
    border-top: 0;
    border-left: 0px;
    border-right: 0;
    border-bottom: 1px solid #fff !important;
    background-color: #e5017d;
    color: #fff;
  }
  .location-icon {
    padding-top: 0.3rem;
    padding-left: 0.3rem;
  }
}
// 轮播
.swiper-area {
  max-height: 9rem;
  overflow: hidden;
  clear: both;
}
// type-bar
.type-bar {
  background-color: #fff;
  margin: 0 0.3rem 0.3rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  div {
    padding: 0.3rem;
    font-size: 12px;
    text-align: center;
  }
}
// 商品推荐
.recommend-area {
  background-color: #fff;
  margin-top: 0.3rem;
  .recommend-title {
    border-bottom: 1px solid #eee;
    font-size: 14px;
    padding: 0.2rem;
    color: #e5017d;
  }
  .recommend-body {
    border-bottom: 1px solid #eee;
  }
  .recommend-item {
    width: 99%;
    border-right: 1px solid #eee;
    font-size: 0.75rem;
    text-align: center;
  }
}
// 热卖商品
.hot-area{
  text-align: center;
  font-size: 14px;
  height: 1.8rem;
  line-height: 1.8rem
}
</style>